<template>
  <div>
    <el-form ref="dataForm" 
      :model="form" 
      label-width="100px"
      label-position="left"
      class="el-form"
      :rules="rules"
      >
      <div>
        <el-form-item label="模板名称" prop="title">
          <el-input v-model="form.title" style="width: 370px;" placeholder="如“经理晋升考核标准”"></el-input>
        </el-form-item>
        <el-form-item label="列表序号" prop="order">
          <el-input v-model="form.sort" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="标准项" prop="options" >
          <div class="form-item" v-for="(item,index) in form.options" :key="index">
            <el-input v-model="item.grade" style="width: 200px;" placeholder="如“胜任、优秀、A”"></el-input> :
            <el-input v-model="item.maxScore" style="width: 70px;" placeholder="max"></el-input> -
            <el-input v-model="item.minScore" style="width: 70px;" placeholder="min"></el-input> 分
            <i class="el-icon-circle-plus" 
              v-if="index==0"
              @click="addStandard(index)"
              style="font-size: 16px;color: rgb(102,204,47);cursor: pointer"></i>
            <i class="el-icon-remove" 
              v-else
              @click="removeStandard(index)"
              style="font-size: 16px;color: rgb(245,98,98);cursor: pointer"></i>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="line-sep" style="margin-top: 25px"></div>
    <div class="btn">
        <el-button class="btn-color" @click="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '',
        sort: 0,
        options: [
          {
            grade: '',
            maxScore: '',
            minScore: ''
          },
          {
            grade: '',
            maxScore: '',
            minScore: ''
          },
          {
            grade: '',
            maxScore: '',
            minScore: ''
          },
        ],
      },
      rules: {
        title: [{ required: true, message: '角色格式错误' }],
        options: [{ required: true, message: '标准项格式错误' }]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 有id是编辑
      // let id = this.$route.params.id != "undefined" ? this.$route.params.id : null
      let id = this.$route.params.id
      if (id) {
        this.$http('rank/selectOneRank', 'post', {id}, false, resp => {
          if (resp.code == 200) {
            let {list} = resp
            this.form = list
            this.form.options = JSON.parse(list.options)
            // console.log(this.form);
          }
        })
      }
    },
    // 提交给后端
    onSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          let id = this.$route.params.id != "undefined" ? this.$route.params.id : null
          let data = {
            title: this.form.title,
            sort: this.form.sort,
            options: this.form.options
          }
          // console.log(data);
          let path = 'addRanks'
          
          if (id) {
            data.id = id
            path = 'updateRank'
          }
          this.$http(`rank/${path}`, 'post', data, false, resp => {
            if (resp.code == 200) {
              this.$message({
                message: "添加成功",
                type: 'success',
                duration: 1200
              })
              setTimeout(() => {
                this.$router.push({ name: 'ExamRank', params: {tabClose: true}})
              }, 1200)
            }
          })
        } else {
          return false
        }
      })
    },
    // 添加一条标准项
    addStandard(index) {
      let option = {
        grade: '',
        maxScore: '',
        minScore: ''
      }
      this.form.options.push(option)
    },
    // 移除一条标准项
    removeStandard(index) {
      this.form.options.splice(index, 1)
    },
  }
}
</script>

<style lang="scss" scoped>
@import './examRankAdd.scss';
</style>